import React, { useEffect, useState } from "react";
import { toast, backgroundObj } from "@/utils/utils";
import { View, Text } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import "taro-ui/dist/style/components/icon.scss";
import "./index.scss";
export default ({
  data,
  show,
  defaultData,
  submit,
  onClose,
  sukSelectData
}) => {

  const {
    goodsSkuList = [],
    goodsBaseInfo = {},
    offlineInfo = {}
  } = data;
  const { picture, } = goodsBaseInfo
  const [selectData, setSelectData] = useState({});
  const [dataInfo, setDataInfo] = useState({
    selectDataInfo: {},
    count: 1,
  });
  const { selectDataInfo, count } = dataInfo
  useEffect(() => {
    const { propertyDesc } = defaultData
    if (show) {
      if (propertyDesc) {
        const data = propertyDesc.split(',').reduce((item, val) => {
          return {
            ...item,
            [val.split(':')[0]]: val.split(':')[1]
          }
        }, {})
        setDataInfo({
          count,
          selectDataInfo: data
        })
      }

    }
    else {
      setDataInfo({
        selectDataInfo: {},
        count: 1,
      })
    }
  }, [show])
  useEffect(() => {
    setSelectData(sukSelectData)
  }, [sukSelectData])
  const filterSelectShop = () => {
    if (Object.keys(selectDataInfo).length > 0) {
      return Object.values(selectDataInfo).toString()
    } else {
      return "未选中";
    }
  };
  //过滤出选中的规格名字
  const getGoodsObj = () => {
    if (Object.values(selectDataInfo).length === Object.keys(selectData).length) {
      let filterList = Object.keys(selectDataInfo).reduce((item, val, index) => {
        return [...item, val + ':' + selectDataInfo[val]]
      }, [])
      const remainData = goodsSkuList.reduce((item, val) => {
        let beal = true;
        filterList.forEach(s => {
          if (!val.propertyDesc.includes(s)) {
            beal = false
          }
        })
        if (beal) {
          return val
        }
        else {
          if (item) {
            return item
          }
          else {
            return false
          }
        }
      }, {})
      return remainData
    }
    else {
      return { ...goodsBaseInfo, ...offlineInfo }
    }
  }
  const { price, skuHighPrice, stock } = getGoodsObj()
  const filterRemain = (key, values) => {
    if (Object.values(selectDataInfo).length >= Object.keys(selectData).length - 1) {
      let filterList = Object.keys(selectDataInfo).reduce((item, val, index) => {
        return [...item, val + ':' + selectDataInfo[val]]
      }, [])
      const remainData = goodsSkuList.reduce((item, val) => {
        let beal = true;
        [...filterList, `,${key}:${values}`].forEach(s => {
          if (!val.propertyDesc.includes(s)) {
            beal = false
          }
        })
        if (beal) {
          return val
        }
        else {
          if (item) {
            return item
          }
          else {
            return false
          }
        }
      }, false)
      return remainData ? remainData.stock > 0 ? false : true : remainData
    }
    else {
      return false
    }
  };
  //过滤缺货
  const changeRule = (type) => {
    if (type === 'add') {
      if (stock >= count) {
        return true
      }
      else {
        return false
      }
    }
    else {
      if (count > 1) {
        return true
      }
      else return false
    }
  };
  //过滤校验条件
  const changeCount = (type) => {
    if (changeRule(type)) {
      if (type === "add") {
        setDataInfo({
          ...dataInfo,
          count: dataInfo.count + 1,
        });
      } else {
        setDataInfo({
          ...dataInfo,
          count: dataInfo.count - 1,
        });
      }
    } else {
      if (type === "add") {
        toast("库存不足");
      } else {
        toast("选择数量不能小于1");
      }
    }
  };

  const filterColor = (item, val) => {
    if (selectDataInfo[item] === val) {
      return (
        <View onClick={() => {
          let dataObj = { ...selectDataInfo }
          delete dataObj[item]
          setDataInfo({
            ...dataInfo,
            selectDataInfo: {
              ...dataObj,
            }
          })
        }} className="shopDrawer_content_tag shopDrawer_content_check">
          {val}
        </View>
      );
    } else if (filterRemain(item, val)) {
      return (
        <View className="shopDrawer_content_tag shopDrawer_content_noRemake">
          {val}
        </View>
      );
    } else {
      return (
        <View
          onClick={() => {
            setDataInfo({
              ...dataInfo,
              selectDataInfo: {
                ...selectDataInfo,
                [item]: val
              }
            })
          }}
          className="shopDrawer_content_tag shopDrawer_content_checkNo"
        >
          {val}
        </View>
      );
    }
  };

  return (
    <View className="shopDrawer_box" onClick={(e) => { e.stopPropagation() }} catchMove>
      <View className="shopDrawer_content_box">
        <View className="shopDrawer_content_shop">
          <View
            className="shopDrawer_content_profile"
            style={backgroundObj(picture)}
          ></View>
          <View className="shopDrawer_content_info">
            <View className="shopDrawer_price_specal">
              <View className="shopDrawer_kol_bean">
                ¥ <Text className="shopDrawer_kol_price"> {skuHighPrice ? `${price}起` : price}</Text>
              </View>
            </View>
            <View className="shopDrawer_content_desc font_noHide">
              已选择：{filterSelectShop()}
            </View>
            <View className="shopDrawer_stock">库存：{stock}</View>
          </View>
        </View>
        <View className="shopDrawer_content_scroll">
          {Object.keys(selectData).map((item) => {
            return (
              <View className="shopDrawer_content_scrollBox">
                <View className="shopDrawer_content_title"> {item}</View>
                <View className="shopDrawer_content_tagContent">
                  {selectData[item].map((val) => {
                    return filterColor(item, val);
                  })}
                </View>
              </View>
            );
          })}
          <View className="shopDrawer_content_count">
            <View className="shopDrawer_content_countTitle">数量 </View>
            <View className="shopDrawer_content_countComputed">
              <View
                className="shopDrawer_content_countRemove"
                onClick={() => changeCount("remove")}
              >
                <AtIcon value='subtract-circle'></AtIcon>
              </View>
              <View className="shopDrawer_content_countNum">{count}</View>
              <View
                className="shopDrawer_content_countAdd"
                onClick={() => changeCount("add")}
              >
                <AtIcon value='add-circle'></AtIcon>
              </View>
            </View>
          </View>
        </View>
      </View>
      <View className="shopDrawer_content_btn public_center">
        <View
          onClick={() => {
            console.log(selectData)
            if (
              (Object.keys(selectData).length === Object.values(selectDataInfo).length) || Object.keys(selectDataInfo).length === 0
            ) {
              submit(
                {
                  selectobj: getGoodsObj(),
                  selectData: selectData,
                  count: count
                }

              );
              onClose();
            } else {
              toast("您有未选择的规格");
            }
          }}
          hoverClass="shopDrawer_content_submitHover"
          className="shopDrawer_content_submit public_center"
        >
          确认
        </View>
      </View>
    </View>
  );
};
